<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>盒子模型</title>
	<style>
		#box1{width:392px; height:392px; border: 1px black dashed ;}
        #box2{border: 5px #d7effe solid;margin: 27px;}
        #box3{border:1px green solid; background-color:#ffa0df ;margin:20px;}
        #box4{border:1px white dashed;margin:41px;}
        #box5{border: 1px white dashed;margin: 3px;}
        #box6{width: 100px ;height: 100px; border: 5px khaki solid;margin:49px ;}

	</style>
</head>
<body>
	<h2>3 4号盒子存在margin塌陷问题，为外层盒子添加边框，可以解决此问题。</h2>
	<h3>更多方法，参考<a target="_blank" href="https://blog.csdn.net/qq_34645412/article/details/79064689">博客</a></h3>
	<hr>
	<hr><br>
	<div id="box1">
		<div id="box2">
			<div id="box3">
				<div id="box4">
					<div id="box5"> 
						<div id="box6"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>